{% extends 'teacher/base.html' %}
{% load staticfiles %}
{% block content %}

        <!-- Page Heading -->
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">
                    Assignment
                </h1>
                <ol class="breadcrumb">
                    <li>
                        <i class="fa fa-suitcase"></i>  <a href="/teaching">Teaching</a>
                    </li>
                    <li>
                        <i class="fa fa-compass"></i> {{ course.title }}
                    </li>
                    <li class="active">
                        <i class="fa fa-child"></i> <a href="/teacher/course/{{ course.id }}/peer_review">Peer-Review</a>
                    </li>
                    <li class="active">
                        <i class="fa fa-book"></i> Assignment #{{ assignment.assignment_num }}
                    </li>
                </ol>
            </div>
        </div>
        <!-- /.row -->

        <!-- Essay(s) -->
        {% for e_submission in e_submissions %}
        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Question #{{ e_submission.question.question_num }}: {{ e_submission.question.title }}</h3>
                    </div>
                    <div class="panel-body">
                        {% include "course/peer_review/e_form.html" %}
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
        <!-- /.Essay Questions -->
        
        <!-- Response Questions -->
        {% for r_submission in r_submissions %}
        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Question #{{ r_submission.question.question_num }}: {{ r_submission.question.title }}</h3>
                    </div>
                    <div class="panel-body">
                        {% include "course/peer_review/r_form.html" %}
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
        <!-- /.Response  Questions row -->

<script>
    //------------------------------------------------------------------------//
    //                                 ESSAY                                  //
    //------------------------------------------------------------------------//
    
    function ajax_submit_e_assignment_answer(question_id)
    {
        var file_id = 'id_file_' + question_id;
        var url = {{ assignment.assignment_id }} + '/submit_e_assignment_answer';
        
        // create a FormData Object using your form dom element
        var data = new FormData();
        data.append('csrfmiddlewaretoken', '{{ csrf_token }}');
        data.append('question_id', question_id);
        data.append('file', document.getElementById(file_id).files[0]);
        
        jQuery.ajax({
            url: url,
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            type: 'POST',
            success: function(result){
                if (result.status == 'success')
                {
                    $("#success_status_info").show();
                    $("#warning_status_info").hide();
                    $("#danger_status_info").hide();
                }
                else
                {
                    var message = "<strong>Failed!</strong>";
                    message += " " + result.message['file']
                    $('#danger_status_msg').html(message);
                    $("#success_status_info").hide();
                    $("#warning_status_info").hide();
                    $("#danger_status_info").show();
                    }
                }
        });
    }
    
    //------------------------------------------------------------------------//
    //                           MULTIPLE CHOICE                              //
    //------------------------------------------------------------------------//

    function ajax_submit_mc_assignment_answer(question_id, answer)
    {
        var url = {{ assignment.assignment_id }} + '/submit_mc_assignment_answer';
        
        // create a FormData Object using your form dom element
        var data = new FormData();
        data.append('csrfmiddlewaretoken', '{{ csrf_token }}');
        data.append('question_id', question_id);
        data.append('answer', answer);
    
        jQuery.ajax({
            url: url,
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            type: 'POST',
            success: function(result){
                if (result.status != 'success') // Print errors.
                {
                    alert(result.message);
                }
            }
        });
    }

    //------------------------------------------------------------------------//
    //                          TRUE/FALSE CHOICE                             //
    //------------------------------------------------------------------------//

    function ajax_submit_tf_assignment_answer(question_id, answer)
    {
        var url = {{ assignment.assignment_id }} + '/submit_tf_assignment_answer';
    
        // create a FormData Object using your form dom element
        var data = new FormData();
        data.append('csrfmiddlewaretoken', '{{ csrf_token }}');
        data.append('question_id', question_id);
        data.append('answer', answer);
    
        jQuery.ajax({
            url: url,
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            type: 'POST',
            success: function(result){
                if (result.status != 'success') // Print errors.
                {
                alert(result.message);
                }
            }
        });
    }

    //------------------------------------------------------------------------//
    //                           RESPONSE CHOICE                              //
    //------------------------------------------------------------------------//

    function ajax_submit_r_assignment_answer(question_id, div_id)
    {
        var url = {{ assignment.assignment_id }} + '/submit_r_assignment_answer';
    
        // create a FormData Object using your form dom element
        var data = new FormData();
        data.append('csrfmiddlewaretoken', '{{ csrf_token }}');
        data.append('question_id', question_id);
        
        // Get the response and append it to the form.
        var text = $(div_id).val();
        data.append('answer', text);
    
        jQuery.ajax({
            url: url,
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            type: 'POST',
            success: function(result){
                if (result.status != 'success') // Print errors.
                {
                    alert(result.message);
                }
            }
        });
    }

    //------------------------------------------------------------------------//
    //                               SUBMISSION                               //
    //------------------------------------------------------------------------//
    function ajax_submit_assignment()
    {
        var url = {{ assignment.assignment_id }} + '/submit_assignment';
        
        // create a FormData Object using your form dom element
        var data = new FormData();
        data.append('csrfmiddlewaretoken', '{{ csrf_token }}');
        
        jQuery.ajax({
            url: url,
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            type: 'POST',
            success: function(result){
                if (result.status != 'success') // Print errors.
                {
                    alert(result.message);
                }
                else
                {
                    window.location = "../assignments"
                }
            }
        });
    }

    /**
     *  Function will call AJAX function to load the video player modal for the lecture.
     */
    function ajax_peer_review_modal(question_id, question_type, submission_id)
    {
        var url = {{ assignment.assignment_id }} + '/peer_review_modal';
    
        $.ajax( url, {
               data: {
                    'csrfmiddlewaretoken': '{{ csrf_token }}',
                    'question_id': question_id,
                    'question_type': question_type,
                    'submission_id': submission_id
               },
               type: 'post',
               success: function(result) {
                    // success code execution here
                    $('#ajax_peer_review').html(result); // Update UI.
                    $('#peer_review_modal').modal();               // Unhide view.
               },
               error: function(xhr,status,error) {
                    // error code here
               },
               complete: function(xhr,status) {
                    // completion code here
               }
        });
    }

    function ajax_save_peer_review(question_id, question_type, submission_id)
    {
        var url = {{ assignment.assignment_id }} + '/save_peer_review';
        var marks = $('#id_marks').val();
        var text = $('#id_text').val();
        
        $.ajax( url, {
            data: {
               'csrfmiddlewaretoken': '{{ csrf_token }}',
               'question_id': question_id,
               'question_type': question_type,
               'submission_id': submission_id,
               'marks': marks,
               'text': text,
            },
            type: 'post',
            success: function(result) {
               if (result.status == 'success')
               {
                    $('#peer_review_modal').modal('hide');
               }
               else
               {
                    alert(result.message);
               }
            },
            error: function(xhr,status,error) {
               // error code here
            },
            complete: function(xhr,status) {
               // completion code here
            }
        });
    }

    function ajax_delete_peer_review(review_id)
    {
        var url = {{ assignment.assignment_id }} + '/delete_peer_review';
        var marks = $('#id_marks').val();
        var text = $('#id_text').val();
    
        $.ajax( url, {
           data: {
               'csrfmiddlewaretoken': '{{ csrf_token }}',
               'review_id': review_id,
           },
           type: 'post',
           success: function(result) {
               if (result.status == 'success')
               {
                    window.location = ''
               }
               else
               {
                    print_error(result.message);
               }
           },
           error: function(xhr,status,error) {
                // error code here
           },
           complete: function(xhr,status) {
                // completion code here
           }
        });
    }

    /**
     * Prints a error box with the contents of the errors received from the server.
     */
    function print_error(json_result)
    {
        $('#error_box').prop("hidden", false); // Display error box.
    
        // Iterate through the JSON array of arrays and generate an error string.
        var message = "<b>Error(s):</b><hr/>";
        var data = $.parseJSON(json_result)
        for (var key in data) {
            if (data.hasOwnProperty(key)) { // this will check if key is owned by data object and not by any of it's ancestors
                message += "<p>" + key + ": " + data[key] + "<p>";
            }
        }
    
        // Replace the error string with the contents of the error box.
        $('#error_box').html(message);
    }
</script>

<!-- Modal -->
<div id="ajax_peer_review"
   name="ajax_peer_review"></div>
<!-- /.Modal -->
{% endblock content %}
